<template>
    <div class="hosInformation">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="main">
            <div class="content">
                <div class="img"><img src="../GreatHospital/img/hospital.png" alt=""></div>
                <div class="cont">创建医院主页</div>
                <div class="step">
                    <Steps :current="1">
                        <Step title="填写医院名称"></Step>
                        <Step title="填写医院基本信息"></Step>
                        <Step title="上传医院资质"></Step>
                    </Steps>
                </div>
                <div class="hint">以下内容带“*”号的为必填项，为确保审核通过，请您填写真实有效的信息。</div>
                <div class="form">
                    <ul>
                        <li><div class="tit">医院名称：</div>石家庄苏亚美联臣医疗美容中心</li>
                        <li><div class="tit" style="float: left"><span>*</span>所在地区：</div>
                            <div style="float: left;margin-top: -5px;width: 232px">
                                <Cascader :data="data" v-model="value1"></Cascader>
                            </div>
                        </li>
                        <li>
                            <div style="width: 232px;margin-left: 90px">
                                <Input v-model="value" placeholder="输入详细医院地址" style="width: 600px;margin-top: 20px;margin-bottom: -20px" />
                            </div>
                        </li>
                        <li style="clear: both;padding-top: 20px"><div class="tit" ><span>*</span>服务类型：</div>
                            <Select v-model="model1" style="width:232px" placement="bottom">
                                <Option v-for="item in hospitals" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </li>
                        <li><div class="tit"><span>*</span>资本类型：</div>
                            <Select v-model="model1" style="width:232px" placement="bottom">
                                <Option v-for="item in dutys" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </li>
                        <li><div class="tit"><span>*</span>医院类型：</div>
                            <Select v-model="model1" style="width:232px" placement="bottom">
                                <Option v-for="item in dutys" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </li>
                        <li style="clear: both" class="clearfix"><div class="tit">业务等级：</div>
                            <Select v-model="model1" style="width:232px" placement="bottom">
                                <Option v-for="item in educations" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <span style="color: #e0e0e0;padding-left: 10px">选填</span>
                        </li>
                        <li style="clear: both" class="clearfix"><div class="tit"style="float: left"><span>*</span>医院项目：</div>
                            <div style="width: 100%;margin-left: 7.5%;">
                                <el-checkbox-group
                                        v-model="checkedCities1"
                                        :min="1"
                                        :max="5">
                                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                                </el-checkbox-group>
                                <span style="display: block;float: right;margin: -20px 180px 0 0;color: #ff5371;">最多选三项</span>
                            </div>
                        </li>
                        <li>
                            <div class="tit" style="float: left"><span>*</span>医院介绍：</div>
                            <textarea></textarea>
                        </li>

                    </ul>
                </div>
                <div class="next"><button  @click="next()">下一步</button><a href="javascript:;"  @click="pre()">返回上一步</a></div>
            </div>

        </div>

        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    const projects = ['眼部', '鼻部', '面部轮廓', '唇部','胸部','美体塑形','皮肤','肉毒素','激光脱毛','耳部','私密整形','牙齿',
        '毛发种植','自体脂肪填充','玻尿酸','微整形','激光美肤','韩式半永久妆','其他','失败修复'
    ];
    export default {
        name: "hosInformation",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        data() {
            return {
                checkedCities1: ['', ''],
                cities: projects,
                value1: [],
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙',
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园',
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林',
                                }
                            ]
                        }
                    ],
                }],

                hospitals: [
                    {
                        value: '美容',
                        label: '美容'
                    },
                    {
                        value: '整形',
                        label: '整形'
                    }
                ],
                dutys: [
                    {
                        value: '医师',
                        label: '医师'
                    },
                    {
                        value: '护士',
                        label: '护士'
                    }
                ],
                educations: [
                    {
                        value: '博士后',
                        label: '博士后'
                    },
                    {
                        value: '本科',
                        label: '本科'
                    },
                    {
                        value: '大专',
                        label: '大专'
                    },
                ],
                model1: ''
            }
        },
        methods: {
            next () {
                this.$router.push({path:'/hosAptitude'})
            },
            pre() {
                this.$router.push({path:'/greathospital'})
            }
        }
    }
</script>

<style scoped lang="less">
    .main{
        background-color: #FFA3B2;
        padding: 52px 0;
        .content {
            width: 1200px;
            height: 1030px;
            border-radius: 6px;
            background-color: #fff;
            margin: 0 auto;
            .img {
                margin: 23px 0 0 42px;
                float: left;
            }
            .cont {
                float: left;
                font-size: 24px;
                color: #ff5371;
                margin: 23px 0 0 8px;
            }
            .step {
                clear: both;
                padding: 40px 0 0 176px;
            }
            .hint{
                width: 858px;
                height: 40px;
                line-height: 40px;
                background-color: #ffd8b9;
                color: #de8a47;
                font-size: 16px;
                margin: 0 auto;
                text-align: center;
                margin-top: 56px;
            }
            .form{
                width: 810px;
                margin: 0 auto;
                font-size: 14px;
                color: #333333;
            }

            .form ul li{
                margin: 25px 0 25px 0;

            }
            .form ul li .tit{
                display: inline-block;
                text-align: right;
                width: 80px;
                margin-right: 10px;
            }
            .form ul li .tit span{
                color: crimson;
            }
            .form ul li .sex{
                margin: 0px 10px;
            }
            textarea{
                width: 626px;
                height: 160px
            }
            .next{
                text-align: center;
            }
            .next button{
                width: 228px;
                height: 40px;
                background-color: #ff5371;
                border-radius: 4px;
                outline: none;
                border: none;
                font-size: 20px;
                color: #fff;
            }
            .next a{
                font-size: 14px;
                padding-left: 20px;
                color:#ff5371 ;
            }
        }


    }
</style>